<!-- 商品详情页，多个页面共用的组件 -->

<script setup lang="ts">
import { ref, inject, watch, provide } from "vue"; //导入vue函数
import { useCart } from "@/stores/cart"; //导入cart状态文件
import { ElMessage } from "element-plus"; //导入消息框
import CartPay from "@/views/Cart/components/CartPay.vue"; //引入自定义组件 - 支付界面

//执行方法获得cartStore对象
const cartStore = useCart();

//商品详情信息
const props = defineProps(["item"]);

//通过依赖注入，共享父组件中的响应数据对象
const isShow = inject("isShowDetails"); //dialog是否显示

//当前商品数量
const goodsCount = ref(1);

//当前商品总价
const currentTotalPrice = ref(0);

//是否显示支付界面
const isShowPay = ref(false);
//通过provide实现跨组件通信
provide("isShowPay", isShowPay); //支付组件是否显示

//Dialog打开的回调函数
function initGoods() {
  goodsCount.value = props.item.num;
}

//改变商品数量
function changeGoodsNum() {
  //计算当前商品总价
  currentTotalPrice.value =
    props.item.discount * props.item.price * goodsCount.value;
}

//加入购物车的事件处理
function addCart() {
  //设置商品信息
  const goods = {
    id: props.item.id,
    category_id: props.item.category_id,
    name: props.item.name,
    price: props.item.price,
    picture: props.item.picture,
    stock: props.item.stock,
    spec: props.item.spec,
    description: props.item.description,
    discount: props.item.discount,
    num: goodsCount.value,
  };
  //添加购物车
  cartStore.addCart(goods);
  //提示信息
  ElMessage({ type: "success", message: "已加入购物车" });
}

//立即购买
function buyNow() {
  //显示支付界面
  isShowPay.value = true;
}

//侦听props变化
watch(props, () => {
  //props发生变化时，获得商品默认数量及总价
  goodsCount.value = props.item.num;
  currentTotalPrice.value =
    props.item.discount * props.item.price * goodsCount.value;
});
</script>

<template>
  <el-dialog v-model="isShow" title="商品详情" width="800" @open="initGoods">
    <!--显示内容-->
    <div class="goods">
      <div><img :src="props.item.picture" /></div>
      <div>
        <div>
          <el-descriptions :column="1" border label-width="100">
            <el-descriptions-item label="商品名称">{{
              props.item.name
            }}</el-descriptions-item>
            <!--注：replace用于过滤HTML代码-->
            <el-descriptions-item label="商品描述">{{
              props.item.description.replace(/<\/?[^>]+(>|$)/g, "")
            }}</el-descriptions-item>
            <el-descriptions-item label="商品价格"
              ><span class="price"
                >￥{{
                  (props.item.discount * props.item.price).toFixed(2)
                }}</span
              ><span class="discount" v-if="props.item.discount != 1"
                >￥{{ props.item.price }}</span
              ></el-descriptions-item
            >
            <el-descriptions-item label="商品库存">{{
              props.item.stock
            }}</el-descriptions-item>
            <el-descriptions-item label="数量">
              <el-input-number
                v-model="goodsCount"
                :min="1"
                :max="props.item.stock"
                @change="changeGoodsNum"
              ></el-input-number>
            </el-descriptions-item>
            <el-descriptions-item label="总价"
              >￥{{ currentTotalPrice.toFixed(2) }}</el-descriptions-item
            >
          </el-descriptions>
        </div>
        <div>
          <el-button size="large" @click="addCart">加入购物车</el-button>
          <el-button type="primary" size="large" @click="buyNow"
            >立即购买</el-button
          >
        </div>
      </div>
    </div>
  </el-dialog>

  <!--自定义组件 - 支付界面-->
  <CartPay :orderPrice="currentTotalPrice"></CartPay>
</template>

<style scoped>
.goods {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.goods img {
  width: 310px;
  height: 310px;
  border-radius: 5px;
}
.goods > div:first-child {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 350px;
}
.goods > div:last-child {
  width: 400px;
}
.goods > div:last-child .el-descriptions {
  margin: 0px;
}
.goods > div:last-child > div:last-child {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}
.goods > div:last-child > div:last-child .el-button {
  width: 180px;
}
.goods .price {
  color: #cf4444;
  font-weight: bold;
  font-size: 20px;
}
.goods .discount {
  color: #999999;
  text-decoration: line-through;
  margin-left: 5px;
  font-size: 13px;
}
:deep(.el-descriptions__label) {
  font-weight: normal !important;
}
</style>
